@import "../base/colors.less";

.segment-bullet() {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: gray;
}

.segmented-progress-bar {
  display: flex;
  align-items: center;
  position: relative;

  &:before {
    .segment-bullet;
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: @blue;
  }

  .segment {
    flex: 1;
    text-align: right;
    position: relative;

    span {
      .segment-bullet;
    }

    &:before,
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-1px);
      width: 100%;
      height: 2px;
      background: #ccc;
      z-index: -1;
    }

    &:before {
      background: @blue;
      z-index: 0;
      width: 0;
      transition: width 0.3s;
    }

    &.filled {
      &:before {
        width: 100%;
      }

      span {
        background: @blue;
      }
    }
  }
}